<template>
  <div id="search">
     <!-- 搜索框部分 -->
   <search  @search="tosearch" @remove="toremove"/>
    <yd-infinitescroll :callback="loadList" ref="infinitescrollDemo" :key="foceKey">
        <yd-list theme="1" slot="list">
          <div class="content" v-for="(list,index) in listData" :key="index">
            <div class="left-wrap" @click='toinquier(list.id)'>
              <p class='ptext'>项目名称:{{list.projectname}} </p >
              <p class="plist">项目地址:{{list.addressdetail}}</p>
              <p class="plist">提交时间:{{list.subtime.split(' ')[0]}}</p>
            </div>
            <div class="right-wrap">
              <div class="stateBox">
                <div class="spantext" v-if="list.status==0" style="color:orange">未审核</div>
                <div class="spantext" v-if="list.status==1" style="color:green">通过</div>
                <div class="spantext" v-if="list.status==2" style="color:red">未通过</div>
              </div>
              <div  @click="openconfirm(list.id)">
                <icon v-if="list.status==0" type="cancel" v-model="show"></icon>
              </div>
            </div>
          </div>
              <div v-transfer-dom>
                <confirm v-model="show"
                @on-cancel="onCancel"
                @on-confirm="onConfirm()">
                <p style="text-align:center;">确定删除吗?</p>
                </confirm>
              </div>
        </yd-list>
        <!-- 数据全部加载完毕显示 -->
        <span slot="doneTip">没有数据啦~~</span>
        <!-- 加载中提示，不指定，将显示默认加载中图标 -->
        <img slot="loadingTip" src="http://static.ydcss.com/uploads/ydui/loading/loading10.svg"/>
    </yd-infinitescroll>
  </div>
</template>
<script type="text/ecmascript-6">
import search from './search'
import address from '@/components/index/address'
import { InfiniteScroll } from 'vue-ydui/dist/lib.rem/infinitescroll'
import { Icon, Confirm, Scroller, TransferDomDirective as TransferDom } from 'vux'
export default {
  directives: {
    TransferDom
  },
  components: {
    search, Icon, Confirm, Scroller, InfiniteScroll
  },
  data () {
    return {
      subtime: [],
      foceKey: 1,
      querylist: {},
      show: false,
      author: {
        one: null, // 查看列表
        two: null, // 删除未审核
        three: null // 审核（通过/不通过）
      },
      ketWordInfo: null,
      listData: [],
      timeInfo: '',
      Id: '',
      type: 1,
      page: 1,
      pageSize: 10,
      getAddress: '',
      stateInfo: [], // 存状态
      stateValue: '',
      userId: '',
      userState: '',
      addresstemp: '',
      Ids: ''
    }
  },
  created () {
    this.menu()
    this.userId = this.$route.query.wxuserinfoid
    var qs = require('querystring')
    this.$axios.post('http://www.ynyxgcxx.com/projectmanage/auth/messagep',
      qs.stringify({
        vid: this.userId
      })
    ).then((response) => {
      if (response.data.wxuserinfo.id !== '') {
        window.localStorage.setItem('userInfo', JSON.stringify(response.data))
        this.author.one = JSON.parse(window.localStorage.getItem('userInfo')).wxuserinfo.isstaff
        this.author.two = JSON.parse(window.localStorage.getItem('userInfo')).wxuserinfo.isdelete
        if (this.author.one !== 1) {
          this.$router.replace('/notice')
        }else{
          this.getData()
        }
      } else {
        console.log('跳转到微信公众号')
      }
    })
  },
  mounted () {
    document.title = '项目列表'
  },
  methods: {
    menu () {
      window.scrollTo(0, 0)
    },
    loadList () {
      if (this.querylist.address !== undefined) {
        for (var i = 0; i < address.length; i++) {
          for (var n = 0; n < this.querylist.address.length; n++) {
            if (this.querylist.address[n] === address[i].value) {
              this.getAddress += address[i].name
            }
          }
        }
      }
      let self = this
      self.page = this.page++
      this.$axios.post('http://www.ynyxgcxx.com/projectmanage/app/projectinfo/list',
        self.confusion(
          JSON.stringify({
            // 关键字
            condition: this.querylist.condition,
            // 时间
            begindata: this.querylist.begindata,
            // 时间
            enddata: this.querylist.enddata,
            // 地址s
            address: this.getAddress,
            // 状态
            status: this.querylist.state,
            limit: this.pageSize,
            page: self.page
          })
        ),
        {
          headers: {
            Authorization: 'Bearer ' + JSON.parse(window.localStorage.getItem('userInfo')).token,
            'Content-Type': 'application/json;charset=UTF-8',
            'Cache-Control': 'no-cache',
            isApp: 'isApp'
          }
        }
      )
        .then(function (response) {
          const _list = response.data
          if (response.data.length === 0) {
            self.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone')
            return
          }
          self.listData = [...self.listData, ..._list]
          if (_list.length < self.limit) {
          /* 所有数据加载完毕 */
            self.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone')
            return
          }
          /* 单次请求数据完毕 */
          self.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad')
          self.page++
        })
    },
    getData (query) {
      this.foceKey += 1
      let querys = { ...query }
      if (querys.address !== undefined) {
        // 地址处理
        this.getAddress = ''
        for (var i = 0; i < address.length; i++) {
          for (var n = 0; n < querys.address.length; n++) {
            if (querys.address[n] === address[i].value) { this.getAddress += address[i].name }
          }
        }
      }
      let self = this
      self.page = this.page++
      this.$axios.post('http://www.ynyxgcxx.com/projectmanage/app/projectinfo/list',
        this.confusion(
          JSON.stringify({
            // 关键字
            condition: querys.condition,
            // 时间
            begindata: querys.begindata,
            // 时间
            enddata: querys.enddata,
            // 地址s
            address: this.getAddress,
            // 状态
            status: querys.state,
            //
            limit: this.pageSize,
            page: this.page
          })
        ),
        {
          headers: {
            Authorization: 'Bearer ' + JSON.parse(window.localStorage.getItem('userInfo')).token,
            'Content-Type': 'application/json;charset=UTF-8',
            'Cache-Control': 'no-cache',
            isApp: 'isApp'
          }
        }
      )
        .then(response => {
          const _list = response.data
          if (response.data.length === 0) {
            self.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone')
            return
          }
          this.listData = [...this.listData, ..._list]
          if (_list.length < this.pageSize) {
          /* 所有数据加载完毕 */
            self.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone')
            return
          }
          /* 单次请求数据完毕 */
          self.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad')
          self.page++
        })
    },
    showBox (id) {
      this.show = true
    },
    onCancel () {
    },
    openconfirm (id) {
      this.show = true
      this.Ids = id
    },
    onConfirm () {
      if (this.Ids) {
        this.cancelCard(this.Ids)
      }
    },
    tosearch (query) {
      this.page = 1
      this.listData = []
      this.querylist = {...query}
      this.getData(this.querylist)
    },
    toremove () {
      if (this.page === 1) {
        this.getData()
      }
    },
    toinquier (id) {
      this.Id = id
      this.$router.push({
        path: '/inquier',
        query: {
          id: this.Id,
          wxuserinfoid: this.userId
        }
      })
    },
    cancelCard (id) {
      this.$axios.post('http://www.ynyxgcxx.com/projectmanage/app/projectinfo/delete',
        this.confusion(
          JSON.stringify({
            id
          })
        ),
        {
          headers: {
            Authorization: 'Bearer ' + JSON.parse(window.localStorage.getItem('userInfo')).token,
            'Content-Type': 'application/json;charset=UTF-8',
            'Cache-Control': 'no-cache',
            isApp: 'isApp'
          }
        }
      ).then((response) => {
        if (response.data === 'SUCCESS') {
          this.$dialog.toast({
            mes: '删除成功'
          })
          this.$router.go(0)
        } else {
          console.log('网络错误')
        }
      })
    }
  }
}
</script>
<style>
#app #search .search-item .weui-cell{
  padding:0;
  text-align:center;
  color:grey;
  background: #fff;
}
#app #search .search-item .vux-cell-value{
 display: none;
}
#app #search .search-item .weui-cell .weui-cell__hd,
#app #search .search-item .vux-datetime div{
  text-align:center;
  width:100%
}
#app #search .search-item .weui-cell_access .weui-cell__ft:after{
  display: none;
}
.weui-search-bar__form{
  line-height: 25px;
}
.search-info{
  margin-top: 5px;
}
body .v-transfer-dom .weui-mask{
    background: rgba(0,0,0,0.1);
}
</style>

<style scoped>
#search{
  background:#fff;
}
.search-info{
  overflow: hidden;
  width: 100%;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background:#fff;
  color: grey;
  border: 1px solid #eee;
  box-shadow: 0 0 5px 0 rgb(223, 220, 220);
}
.search-info ul{
  display: flex;
  height: 100%;

}
.search-info ul li{
  flex:1;
  height: 100%;
}
.content{
  width:calc(100% - 10px);
  margin: 10px auto;
  display: flex;
  height: auto;
  background: #fff;
  box-shadow: 0 0 10px 0 rgb(223, 220, 220);
}
.left-wrap{
  width:calc(100% - 50px);
  text-align: center;
  border-radius: 5px;
}
.right-wrap{
  width: 50px;
  display: flex;
  text-align: center;
  flex-direction: column;
}
.contentbox{
  display: flex;
}
.content .ptext{
  flex: 1;
  line-height: 35px;
  text-align: left;
  text-indent: 5px;
  color: #333;
  font-size: 14px;
  overflow: hidden;/*超出部分隐藏*/
  white-space: nowrap;/*不换行*/
  text-overflow:ellipsis;/*超出部分文字以...显示*/

}
.content .plist{
  width: 100%;
  height: 30px;
  line-height: 30px;
  clear: both;
  color: #666;
  text-align: left;
  text-indent: 5px;
  overflow: hidden;/*超出部分隐藏*/
  white-space: nowrap;/*不换行*/
  text-overflow:ellipsis;/*超出部分文字以...显示*/
}
.spantext{
  font-size: 12px;
  color:rgb(6, 190, 182);
  display: inline-block;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
.serchBox{
  width: 100%;
  margin: 0px auto;
  display: flex;
  background-color: #fff;
  padding: 5px 0px;
}
.serchBox input {
  height: 30px;
  border: 1px solid #ccc;
  flex: 1;
  margin: 0px 0px 0px 5px;
  text-indent: 5px;
}
.serchBox span{
  width: 60px;
  text-align: center;
  display: block;
  height: 30px;
  line-height: 30px;
  background-color: green;
  margin-right: 5px;
  color: #fff;
}
.weui-search-bar__box .weui-search-bar__input{
  padding: 0;
}
</style>
